<template>
  <div>
    <el-dialog
      :title="getDesignName((form.formDesignId || {}).id)"
      :visible="visible"
      width="60%"
      @close="visible = false"
      :close-on-click-modal="false"
    >
      <el-card v-if="form.workflowStatus == 0" shadow="never">
        <el-form
          :model="form"
          :rules="rules"
          ref="form"
          label-width="0px"
          class="demo-form"
          label-position="top"
          v-loading="loading"
        >
          <el-form-item label="标题" prop="title" label-width="50px">
            <el-input  type="text" v-model="form.title"></el-input>
          </el-form-item>

          <el-form-item label="" prop="title">
            <controlPanel ref="controlPanel" :isEdit="isEdit"></controlPanel>
          </el-form-item>
        </el-form>
      </el-card>

      <span slot="footer" class="dialog-footer">
        <el-button @click="visible = false" size="small">取 消</el-button>
        <el-button type="primary" @click="confirm" size="small"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import controlPanel from "@/views/workflows/formDesign/controlPanel.vue";
export default {
  components: { controlPanel },
  props: {
    value: {
      id: 1,
    },
  },
  watch: {
    value: {
      handler() {
        //this.load();
      },
      deep: true,
    },
    visible(newVal, oldVal) {
      if (!newVal && oldVal) this.hide();
    },
    "form.formDesignId.id": {
      handler(newVal, oldVal) {
        if (newVal == oldVal) return;
        var selected = this.selections.filter(
          (s) => s.id == this.form.formDesignId.id
        )[0];
        if (!selected) return;
        var formDesignId = {
          id: selected.id,
          version: selected.activeVersion,
        };
        this.getDesign(formDesignId);
      },
    },
  },
  model: {
    prop: "value",
    event: "change",
  },
  data() {
    return {
      loading: false,
      visible: false,
      form: {
        name: "",
        formDesignId: {},
      },
      controls: [],
      selections: [],
      rules: {
        // title: [{ required: true, message: "请输入", trigger: "change" }],
        // designId: [{ required: true, message: "请选择", trigger: "change" }],
      },
      isEdit: true,
    };
  },
  methods: {
    confirm() {
      this.commit();
    },
    show(value) {
      this.visible = true;
      this.getAllFormDesignVersions();
      if (value) this.loadData(value);
    },
    hide() {
      this.visible = false;
      this.form = {
        name: "",
        formDesignId: {},
        formData: {},
      };
    },
    loadData(value) {
      this.loading = true;
      this.$store
        .dispatch("dynamicFormInstance/get", { id: value })
        .then((res) => {
          this.form = res;
          this.getDesign(this.form.formDesignId).then((controls) => {
            this.loading = false;
            //this.$set(this.form, "formData", JSON.parse(res.formData || "{}"));
            this.$refs.controlPanel.setValue(
              controls,
              JSON.parse(res.formData || "{}")
            );
          });
        });
    },
    commit() {
      const _this = this;
      this.$refs["form"].validate((valid) => {
        if (valid) {
          var selected = this.selections.filter(
            (s) => s.id == this.form.formDesignId.id
          )[0];
          var data = {
            id: this.form.id,
            title: this.form.title,
            workflowId: selected.workflowId,
            formDesignId: {
              id: selected.id,
              version: selected.activeVersion,
            },
            formData: JSON.stringify(this.$refs.controlPanel.getValue()),
          };

          this.$store
            .dispatch("dynamicFormInstance/update", data)
            .then((res) => {
              this.$emit("ok-click", res);
              this.hide();
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    getAllFormDesignVersions(formDesignId) {
      return this.$store
        .dispatch("dynamicFormDesign/getAllList", {
          formDesignId: formDesignId,
        })
        .then((res) => {
          this.selections = res;
        });
    },
    getDesign(id) {
      return this.$store
        .dispatch("dynamicFormDesign/getFormDesignVersion", id)
        .then((res) => {
          if (res && res.designContent)
            return JSON.parse(res && res.designContent);
          else return [];
        });
    },
    getDesignName(designId) {
      var designs = this.selections.filter((s) => s.id == designId);
      return designs && designs.length > 0 ? designs[0].title : "";
    },
  },
};
</script>

<style></style>
